<template>
    <common-card
     title="累计订单量"
     value="2,154,420"
    >
        <template>
            <div id="total-orders-chart" :style="{width: '100%' , height: '100%'}"/>
        </template>
        <template v-slot:footer>
            <span>昨日订单量 </span>
            <span class="emphasis">2,000,456</span>
        </template>
    </common-card>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
export default {
    mixins: [commonCardMixin],
    mounted () {
        const chartDom = document.getElementById('total-orders-chart')
        const chart = this.$echarts.init(chartDom)
        chart.setOption({
            xAxis: {
                type: 'category',
                show: false,
                boundaryGap: false
            },
            yAxis: {
                show: false
            },
            series: [{
                type: 'line',
                data: [620, 665, 565, 654, 222, 568, 444, 584, 155, 656, 847, 151],
                areaStyle: {
                    color: 'purple'
                },
                linestyle: {
                    width: 0
                },
                itemStyle: {
                    opacity: 0
                },
                smooth: true
            }],
            grid: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0
            }
        })
    }
}
</script>

<style lang='scss' scoped>

</style>
